<template>
  <div class="content-info">
    <LabelTitle text="事件待办" :showImg="false"></LabelTitle>
    <div class="rightbtn" @click="seeAllData">查看全部 ></div>
    <div class="content-box mt10">
      <div class="event-box">
        <template v-if="eventlist.length > 0">
          <div
            class="event-item"
            v-for="(item, index) in eventlist"
            :key="index"
            @click.stop="seedetail(item)"
          >
            <img class="img" v-if="item.pic" :src="item.pic" />
            <el-empty class="img" :image-size="50" description=" " v-else />
            <div class="rightinfo">
              <div class="title-box">
                <span class="title">{{ item.eventName }}</span>
                <span class="tip" :class="getClass(item.eventClass)">{{
                  item.eventClass
                }}</span>
                <span
                  class="eventTip"
                  :class="getEventClass(item.eventSource)"
                  >{{ item.eventSource.substring(0, 2) }}</span
                >
              </div>
              <p class="text mt10">时间：{{ item.eventTime }}</p>
              <p class="text exlipse" :title="item.address">
                地址：{{ item.address }}
              </p>
            </div>
            <!-- <div class="rightbtn-f" @click="seeAllData">一键取证</div> -->
          </div>
        </template>
        <div v-else class="no-data">
          <img src="../../../../assets/images/empty.png" alt="暂无数据" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import { useRouter } from "vue-router";
import { TabbarList } from "@/pinia/tabbar.js";
import { onMounted } from "vue";
import { getzxsjList } from "@/api/event.js";
let piniaTab = TabbarList();
const router = useRouter();
let eventlist = ref([]);

function seeAllData() {
  console.log("查看全部数据");
  // router.push("/eventlist");
  piniaTab.add({
    name: "处置列表",
    path: "/eventhandling",
    icon: "",
    query: {
      // id: data.belongOrgId || data.busiTypeCode,
      // // name: data.busiType || data.belongOrg,
      // // nameEn: row.tableName
    },
    meta: {
      hidden: false,
      title: "",
    },
  });
}

const getData = async (data) => {
  try {
    let { data } = await getzxsjList({
      eventStatus: "0",
    });
    eventlist.value = data.busizEventList;
  } catch (e) {
    console.error(e);
  }
};
const getClass = (eventClass) => {
  switch (eventClass) {
    case "紧急":
      return "red";
    case "智能":
      return "green";
    case "重点":
      return "org";
    case "普通":
      return "blue";
    default:
      return "";
  }
};
const getEventClass = (eventSource) => {
  switch (eventSource) {
    case "智能事件":
      return "green";
    case "人工事件":
      return "blue";
    default:
      return "";
  }
};
const seedetail = (row) => {
  piniaTab.add({
    name: "处置详情",
    path: "/czdetail",
    icon: "",
    query: {
      busizEventId: row.busizEventId,
    },
    meta: {
      hidden: false,
      title: "",
    },
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.content-info {
  margin-top: 15px;
  // width: calc(50% - 10px);
  // widows: 0%;
  // width: 50%;
  width: 690px;
  // flex: 1;
  // height: 418px;
  height: calc(100% - 300px);

  position: relative;
  margin-right: 20px;
  .rightbtn {
    position: absolute;
    right: 0;
    top: 3px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #2263bf;
    line-height: 20px;
    cursor: pointer;
  }
  .content-box {
    height: 420px;
    margin-top: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 15px;
    padding: 15px;
    .event-box {
      width: 100%;
      height: 100%;
      overflow: auto;
      .event-item {
        margin-bottom: 10px;
        width: 100%;
        // height: 90px;
        padding: 14px 23px 14px 14px;
        background: rgba(34, 99, 191, 0.06);
        box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
        border-radius: 12px;
        display: flex;
        align-items: center;
        .img {
          width: 156px;
          height: 88px;
          border-radius: 4px;
          margin-right: 13px;
        }
        .rightinfo {
          flex: 1;
          .title-box {
            display: flex;
            align-items: center;
            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
            }
            .tip {
              font-size: 12px;
              color: #45aff7;
              width: 42px;
              height: 24px;
              border-radius: 4px;
              background: #d2f0ff;
              border: 1px solid #a5dcff;
              text-align: center;
              line-height: 24px;
              margin: 0 6px 0 8px;
              &.red {
                background: #ffd2d2;
                color: #da5a5a;
                border: 1px solid #ffa5a5;
              }
              &.green {
                background: #cbfff2;
                border: 1px solid #72d1c0;
                color: #39aa92;
              }
              &.org {
                background: #ffe9d2;
                color: #ff982b;
                border: 1px solid #ffbe7c;
              }
              &.blue {
                background: #d2f0ff;
                color: #45aff7;
                border: 1px solid #d2f0ff;
                font-family: none;
              }
            }
            .eventTip {
              font-size: 12px;
              color: #45aff7;
              width: 42px;
              height: 24px;
              border-radius: 4px;
              background: #d2f0ff;
              border: 1px solid #a5dcff;
              text-align: center;
              line-height: 24px;

              &.green {
                background: #cbfff2;
                border: 1px solid #72d1c0;
                color: #39aa92;
                font-family: none;
              }
              &.blue {
                background: #d2f0ff;
                color: #45aff7;
                border: 1px solid #d2f0ff;
                font-family: none;
              }
            }
          }
          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
          }
        }
        .rightbtn-f {
          width: 74px;
          height: 26px;
          background: #2263bf;
          border-radius: 4px;
          font-size: 12px;
          color: #ffffff;
          line-height: 26px;
          cursor: pointer;
          text-align: center;
        }
      }

      .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 20px;
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          line-height: 20px;
        }
        img {
          width: 100px; // 根据需要调整图片宽度
          height: 100px; // 根据需要调整图片高度
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
